<script setup lang="ts">
import {
    Document,
    Menu as IconMenu,
    Setting,
    HomeFilled,
    Search,
    InfoFilled
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
    // console.log('handleOpen', key, keyPath)
}

</script>

<template>
    <div class="msg-container">
        <div class="left">
            <h5>
                <el-icon>
                    <HomeFilled />
                </el-icon>
                / 会员中心
            </h5>
            <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" router>
                <el-menu-item index="/user/certification">
                    <el-icon><icon-menu /></el-icon>
                    <span>实名认证</span>
                </el-menu-item>
                <el-menu-item index="/user/order">
                    <el-icon>
                        <document />
                    </el-icon>
                    <span>挂号订单</span>
                </el-menu-item>
                <el-menu-item index="/user/patient">
                    <el-icon>
                        <setting />
                    </el-icon>
                    <span>就诊人管理</span>
                </el-menu-item>
                <el-menu-item index="/user/profile">
                    <el-icon>
                        <InfoFilled />
                    </el-icon>
                    <span>账号信息</span>
                </el-menu-item>
                <el-menu-item index="/user/feedback">
                    <el-icon>
                        <Search />
                    </el-icon>
                    <span>意见反馈</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="user-content">
            <router-view></router-view>
        </div>
    </div>

</template>

<style scoped>
.msg-container {
    width: 1200px;
    margin: auto;
    display: flex;
    min-height: 600px;

    .left {

        h5,
        .el-menu {
            width: 140px;
        }

        h5 {
            text-align: center;
            font-size: 18px;
            margin-top: 10px;
        }
    }

    .user-content {
        flex: 1;
        margin-left: 30px;
    }
}
</style>